import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem,NavBar,Icon,TabBar } from "antd-mobile"
import JsBarcode  from 'jsbarcode';
import { connect } from 'dva';
import { handleImg, goToPage,isNull } from "../../utils/helper";
import { setLogout } from "../../utils/request"
import { Row, Col,Select } from 'antd';
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import MToast from '../../components/Util/MToast';
import Product from '../../../public/image/myCoupon.png';
import Header from '../../../public/image/myHeader2.png';
import NoLoginHeader from '../../../public/image/myHeader.png';
import './PlaceOrder.less';
const customerStyle = {
  fontSize: '13px',
  color:'#775E48',
overflow:'hidden',
textOverflow: 'ellipsis',
display:'-webkit-box',
WebkitLineClamp: 2,
autoprefixer: 'off',
WebkitBoxOrient: 'vertical',
  float:"left",
  marginLeft:'8px',
  paddingTop:'2px',
  width:"100%",
  height:'30px',
  // lineHeight:'40px'
}
const myCoupon={
  width:'100%',
  height:'80px',
  backgroundImage: 'url(' + Product + ')',
  backgroundRepeat: 'no-repeat',
  backgroundSize: '100% 80px',
}
const myHeader={
  width:'100%',
  height:'253px',
  backgroundImage: 'url(' + Header + ')',
  backgroundRepeat: 'no-repeat',
  backgroundSize: '100% 253px',
}
const noLoginHeader={
  width:'100%',
  height:'253px',
  backgroundImage: 'url(' + NoLoginHeader + ')',
  backgroundRepeat: 'no-repeat',
  backgroundSize: '100% 253px',
}
@connect(() => {
  return ({

  })
})

export default class My extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      selectedTab: 'yellowTab',
      open: false,
      noLogin:false,//没有登录
      privacyModal:false,
      bindCus:false,//未绑定客户
      bindModal:false,
      lengthVis:false,//判断用户名是一行还是两行的显示
      levelVis:false,//判断客户等级是一行还是两行的显示
      value: localStorage[MI_APP_CODE + "memberBarcode"],
      useNum:'',//可以使用几张优惠券
      fullNum:'',//满多少的金额
      minNum:'',//减多少的金额
      startTime:'',//开始时间
      endTime:'',//结束时间
      overTime:'',//过期时间
      visOver:false,
      haveCoupon:false,//是否有优惠券
      total: localStorage[MI_APP_CODE + "total"],

    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    console.log(typeof(localStorage[MI_APP_CODE + "phone"]));
    console.log(localStorage[MI_APP_CODE + "bindName"])
    // undefined
    if(localStorage[MI_APP_CODE + "phone"]!==undefined){
      console.log("1")
      this.setState({
        noLogin:true
      })

      if(localStorage[MI_APP_CODE + "bindName"]!=='null'){
        console.log("已绑定")
        this.setState({
          bindCus:true,
        })

        if(localStorage[MI_APP_CODE + "couponsList"]=='undefined' || localStorage[MI_APP_CODE + "couponsList"]=='null' ){
          console.log("4444")
          this.setState({
            haveCoupon:false
          })
        }else{
          let couponsList = JSON.parse(localStorage[MI_APP_CODE + "couponsList"]);
          console.log(couponsList);
          let couponsNew = couponsList.filter((element) => (element.enabled == 1))//表示优惠券还在继续

          localStorage[MI_APP_CODE + "couponsWait"] = JSON.stringify(couponsNew);

          console.log(couponsNew.length)
          if(couponsNew.length==0){
            this.setState({
              haveCoupon:false
            })
          }else{
            this.setState({
              useNum:couponsNew.length,
              fullNum:couponsNew[0].condations_of_use,
              minNum:couponsNew[0].coupons_price,
              startTime:couponsNew[0].coupons_start_date,
              endTime:couponsNew[0].coupons_end_date,
              haveCoupon:true
            })
            localStorage[MI_APP_CODE + "couponCode"] = couponsNew[0].code;
            if(couponsNew[0].overdueCount==0){
              this.setState({
                visOver:true
              })
            }else{
              this.setState({
                visOver:false,
                overTime:couponsNew[0].overdueCount
              })
            }
          }
        }



        if(localStorage[MI_APP_CODE + "customerName"].length>18){
          this.setState({
            lengthVis:true
          })
        }else{
          this.setState({
            lengthVis:false
          })
        }
        if(localStorage[MI_APP_CODE + "levelName"].length>18){
          this.setState({
            levelVis:true
          })
        }else{
          this.setState({
            levelVis:false
          })
        }

      }else{
        console.log("未绑定")
        this.setState({
          bindCus:false,
        })
      }

    }else{
      console.log("2")
      this.setState({
        noLogin:false
      })

    }


    // 调用商品的列表是为了获取store_id
//     dispatch({
//       type: "form/query",
//       payload: {
//         apiInfo: {
//           url: "qry/all?_c=app_goods_list",
//           params: [
//           ],
//           _c: "app_goods_list"
//         },
//         callback: (result) => {
//           let { data } = result;
//           console.log(data);
// console.log(data[0].store_id)
//           localStorage.setItem("store_id",data[0].store_id)
//
//         }
//       }
//     });
  }
  componentDidMount() {
    let {useNum} = this.state;
    // console.log(JSON.parse(localStorage[MI_APP_CODE + "couponsList"]))

    if(this.state.bindCus){
      this.toJsBarcode();
    }else{

    }

  }
  // componentDidUpdate(){
  //   console.log("111")
  //   this.toJsBarcode();
  // }
  toJsBarcode=()=>{
    // 调用 JsBarcode方法生成条形码
    JsBarcode(document.getElementById('barcode'), this.state.value, {
      text: "",
      displayValue: false,
      width: 2,
      height: 59,
      margin: 5,
      background:'#F2E0C8'
    });
    console.log('111',JsBarcode)
  }
  onOpenChange = () => {
    this.setState({ open: !this.state.open });
  };
  // setLogout=()=>{
  //   let {dispatch,location} = this.props;
  //   dispatch({
  //     type: "form/query",
  //     payload: {
  //       apiInfo: {
  //         "url": "/logout",
  //         "params": [
  //           {
  //             "key": "token",
  //             "value":localStorage[MI_APP_CODE + "mi_token"]
  //           },
  //         ]
  //       },
  //       callback: (result) => {
  //         let { data } = result;
  //         console.log(data)
  //         var storage=window.localStorage;
  //         storage.clear();
  //         // if (browser.isInApp) {
  //         //   Func.callHander(bridge, "logoutSuccess");//解决安卓 浏览器的localStorage清不掉的bug
  //         // }
  //         // else {
  //         //   window.location.reload()
  //         // }
  //         window.location.reload()
  //         // goToPage({ dispatch, config: { url: "/login" }, isReplace: false })
  //       }
  //     }
  //   })
  // }
  newLogin=()=>{
    let { dispatch, location } = this.props;
    goToPage({ dispatch, config: { url: "/newLogin" }, isReplace: false })
  }
  goRegister(){
    let {dispatch}=this.props;
    goToPage({ dispatch, config: { url: "/register" }, isReplace: false })
  }
  onClose=()=>{
    this.setState({
      bindModal:false
    })
  }
  customerClick=()=>{
    this.setState({
      bindModal:true
    })
  }
  haveShop=()=>{
    let { dispatch, location } = this.props;
    goToPage({ dispatch, config: { url: "/haveshop" }, })
  }
  customerType=()=>{
  let { dispatch, location } = this.props;
goToPage({ dispatch, config: { url: "/customerType" }, })
}
  barcode=()=>{
    let { dispatch, location } = this.props;
    goToPage({ dispatch, config: { url: "/barcode" }, })
  }
  couponClick=()=>{
    let { dispatch, location } = this.props;
    goToPage({ dispatch, config: { url: "/couponCode" }, })
  }
  myCouponClick=()=>{
    let { dispatch, location } = this.props;
    goToPage({ dispatch, config: { url: "/myCoupon" }, })
  }
  customerDetail=()=>{
    let { dispatch, location } = this.props;
    goToPage({ dispatch, config: { url: "/customerDetail" }, })
  }
  render(){
    let {dispatch} = this.props;
    let {img,img1,noLogin,bindCus,lengthVis,levelVis,useNum,fullNum,minNum,startTime,endTime,overTime,visOver,total,haveCoupon} = this.state;
    const messages = localeData[localStorage.locale];

    return(
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
      <div style={{height:"100%",position: 'relative',background:'#fff'}}>
        <div style={{position:'relative',width:'100%'}}>
          {noLogin?
            <div >
              {/*<img src="image/myHeader2.png" style={{width:'100%'}} />*/}
              {bindCus?
                <div style={{width:'100%',}} >
                  {/*<img src="image/bind1.png" style={{width:'321px',overflow:'hidden'}}></img>*/}

                  <div style={myHeader}>
                    <div style={{padding:'136px 32px 0',overflow:'hidden'}} onClick={this.customerDetail}>
                      <div style={{float:"left",width:'44%',marginRight:'16px'}}>
                        <div style={customerStyle}>
                          {lengthVis?<p>{localStorage[MI_APP_CODE + "customerName"]}</p>:<p style={{lineHeight:'15px'}}>{localStorage[MI_APP_CODE + "customerName"]}</p>}
                          {/*<p style={customerStyle}>{localStorage[MI_APP_CODE + "customerName"]}tgregewfwesgvregergrefgbrfdvesfefergtrhthygfnfgnrthtrhgtrgroooooooo</p>*/}
                        </div>
                      </div>
                      <div style={{float:"left",width:"50%",overflow:'hidden'}}>
                        <div style={{float:"left",width:'17%',}}><img src="image/userVip.png" style={{width:"24px"}}></img></div>
                        <div style={{float:'left',width:'80%'}}>
                          <div style={customerStyle}>
                            {levelVis?<p>{localStorage[MI_APP_CODE + "levelName"]}</p>:<p style={{lineHeight:'15px'}}>{localStorage[MI_APP_CODE + "levelName"]}</p>}
                            {/*<p style={customerStyle}>{localStorage[MI_APP_CODE + "customerName"]}tgregewfwesgvregergrefgbrfdvesfefergtrhthygfnfgnrthtrhgtrgroooooooo</p>*/}
                          </div>
                        </div>

                      </div>
                    </div>

                    <div style={{width:'300px',margin:'10px auto 0px',padding:'8px 0px' }} onClick={this.barcode}>
                      <svg
                        id="barcode"
                      />
                    </div>
                    <div style={{position:'relative',width:'100%',height:'50px'}}>
                      <img src="image/tiao.png" style={{position:'absolute',top:'-34px',left:'0px',width:'100%'}}/>
                    </div>

                    </div>
                  {haveCoupon? <div style={{width:'100%',padding:'0px 20px'}}>
                    <div style={{overflow:'hidden',width:'100%',marginBottom:'12px',position:'relative',paddingTop:"20px"}} onClick={this.myCouponClick}>
                      <div style={{float:"left",fontSize:"17px",color:'#2e2d35',fontWeight:500,marginRight:'4px',}}>{messages.coupon}</div>
                      <div style={{width: '85px',marginRight:'15px',
                        background: '#f33a00',
                        borderRadius: '10px 10px 10px 0px',color:'#fff',fontSize:"10px",padding:'4px 3px',position:'absolute',top:'8px',left:'92px'}}>{total}张券即将过期</div>
                      <div style={{float:"left",fontSize:'14px',color:'#7C7C7C',marginLeft:'24%'}}>可用{useNum}张 {messages.coupon6}</div>
                      <div style={{float:"left"}}>
                        <img src="image/rightIcon.png" style={{width:'16px'}}/>
                      </div>
                    </div>

                    <div style={{}} onClick={this.couponClick}>
                      <div style={myCoupon}>
                        <div style={{overflow:'hidden'}}>
                          <div style={{float:'left',width:'31%',padding:'10px 0'}}>
                            <p style={{color:'#fff',fontSize:"13px",textAlign:"center",margin:'0px'}}>满{fullNum}€减</p>
                            <p style={{color:"#fff",textAlign:'center',margin:'0px',position:'relative'}}><span style={{fontSize:"18px",position:'absolute',top:'6px',left:'36px'}}>€</span><span style={{fontSize:"32px"}}>{minNum}</span></p>
                          </div>
                          <div style={{float:'left',width:'68%'}}>
                            <p style={{margin:'12px 16px 16px 16px',color:'#181B19',fontSize:'15px',fontWeight:'500'}}>{startTime}至{endTime}</p>
                            <p style={{marginLeft:'16px'}}>
                              {visOver?<span style={{marginLeft:'77px'}}></span>:<span style={{color:"#FF5722",}}>还有{overTime}天过期</span>}
                              <span style={{width: '64px',
                                height: '20px',
                                border: '2px solid #03b0a9',
                                borderRadius: '12px',
                                color:'#03B0A9',fontSize:'10px',padding:'4px 12px',marginLeft:'25%'}}>{messages.coupon10}</span></p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>:<div style={{width:'100%',padding:'0px 20px'}}>
                    <div style={{overflow:'hidden',width:'100%',marginBottom:'12px',position:'relative',paddingTop:"20px"}} onClick={this.myCouponClick}>
                      <div style={{float:"left",fontSize:"17px",color:'#2e2d35',fontWeight:500,marginRight:'4px',}}>{messages.coupon}</div>
                      <div style={{float:"left",fontSize:'14px',color:'#7C7C7C',marginLeft:'37%'}}>{messages.coupon1}</div>
                      <div style={{float:"left"}}>
                        <img src="image/rightIcon.png" style={{width:'16px'}}/>
                      </div>
                    </div>
                  </div>}

                  <div>

                  </div>

                </div>
                :
                <div style={myHeader}>
                  <div style={{width:'24px',margin:'0px auto 16px',paddingTop:'35%'}}>
                    <img src="image/userVip.png" style={{width:'24px',margin:'0 auto'}}></img>
                  </div>
                  <div style={{width: '172px',
                    height: '32px',
                    background: 'linear-gradient(95deg, #FFDFB6 0%, #E3A574 100%)',
                    borderRadius: '16px',color:'#775E48',fontSize:'15px',margin:'0 auto',
                    textAlign:'center',lineHeight:'32px'}} onClick={this.customerClick}>
                   {messages.applyTitie}
                  </div>
                </div>



                }
          </div>
          :
            <div style={noLoginHeader}>

            <img src="image/avatar.png" style={{width:'18%',position:'absolute',top:'20%',left:'5%'}}/>
            <div style={{position:'absolute',top:'25%',left:'29%',width:'100%',color:'#FFFFFF',fontSize:'17px'}}>
              {messages.noLogin}
            </div>
            </div>
            }


          {/*<div style={{width:'80%',margin:'0 auto',background:'#fff',borderRadius:'5px',padding:'20px 16px 20px 24px',position:'absolute',bottom:'-40px',left:'11%',zIndex:'10',boxShadow: '3px 3px 3px rgba(0,0,0,.2)'}} onClick={()=>goToPage({ dispatch, config: { url: "/myOrder" }, isReplace: false })}>*/}
            {/*<div style={{width:'90%',display:'inline-block'}}>*/}
              {/*<div style={{width:'100%',color:'#000000',fontSize:'20px'}}>{messages.myTitle}</div>*/}
              {/*/!*<div style={{width:'100%',color:'#595867',fontSize:'15px'}}>我的订单</div>*!/*/}
            {/*</div>*/}
            {/*<div style={{width:'5%',display:'inline-block'}} >*/}
              {/*<img src='image/arrow_right.png' style={{width:'24px'}}/>*/}
            {/*</div>*/}
          {/*</div>*/}
          <Row>
            {noLogin?
              <Row style={{width:'100%',marginTop:'24px'}}>
              <Col span={8} style={{textAlign:'center'}}
              onClick={()=>goToPage({ dispatch, config: { url: "/myOrder" }, isReplace: false })}
            >
              <img src="image/order2.png" style={{width:'64px'}}/>
              <p>{messages.myTitle}</p>
            </Col>
              <Col span={8} style={{textAlign:'center'}} onClick={()=>goToPage({ dispatch, config: { url: "/chat" }, isReplace: false })}>
              <img src="image/contact.png" style={{width:'64px'}}/>
              <p>{messages.contact}</p>
              </Col>
                <Col span={8} style={{textAlign:'center'}} onClick={()=>goToPage({ dispatch, config: { url: "/feedback" }, isReplace: false })}>
                  <img src="image/feedback2.png" style={{width:'64px'}}/>
                  <p>{messages.feedback}</p>
                </Col>
              </Row>
              :
              <Row style={{width:'100%',marginTop:'24px'}}>
                <Col span={8} style={{textAlign:'center'}}
                  onClick={()=> MToast.info(T(messages.my1,3, null, false))}
                >
                  <img src="image/order2.png" style={{width:'64px'}}/>
                  <p>{messages.myTitle}</p>
                </Col>
                <Col span={8} style={{textAlign:'center'}} onClick={()=> MToast.info(T(messages.my1,3, null, false))}>
                  <img src="image/contact.png" style={{width:'64px'}}/>
                  <p>{messages.contact}</p>
                </Col>
                <Col span={8} style={{textAlign:'center'}} onClick={()=> MToast.info(T(messages.my1,3, null, false))}>
                  <img src="image/feedback2.png" style={{width:'64px'}}/>
                  <p>{messages.feedback}</p>
                </Col>
              </Row>

            }
          </Row>
          <div style={{width:'80%',margin:'0 auto',position:'absolute',top:'145%',left:'10%'}}>
            {/*<Button type="primary" style={{fontSize:'14px',width:'100%'}}>Esci 退出</Button>*/}
            {noLogin?<Button style={{ background: "#ed4747", color: "#fff", borderRadius: "20px",width:'100%',height:'42px',lineHeight:'42px' }} size="default" onClick={() => {

              Modal.alert(messages.myModelTitle, messages.myModelTitle1, [{ text:messages.myModelCancel },
                {
                  text: messages.myModelSure,
                  onPress: () => {
                    localStorage.removeItem(MI_APP_CODE + "phone");
                    localStorage.removeItem(MI_APP_CODE + "bindName")
                    localStorage.removeItem(MI_APP_CODE + "customerName")
                    localStorage.removeItem(MI_APP_CODE + "levelName")
                    localStorage.removeItem(MI_APP_CODE + "couponsList")
                    localStorage.removeItem(MI_APP_CODE + "memberBarcode")
                    localStorage.removeItem(MI_APP_CODE + "total")
                    this.onOpenChange()
                    setLogout();
                  }
                }])
            }}>{messages.myModelLou}</Button>:<div>
              <div style={{width:'90%',margin:'0% auto'}}>
                <Button
                  style={{background:'#F09600',borderRadius:'20px',border:'none',height:'42px',lineHeight:'42px',width:'100%'}}
                  type="primary"
                  onClick={this.newLogin}
                >{messages.login}</Button>
              </div>
              {/*<div style={{width:'90%',margin:'6% auto 0'}}>*/}
                {/*<Button*/}
                  {/*style={{background:'#F0F2F5',borderRadius:'20px',border:'none',height:'44px',lineHeight:'44px',width:'100%'}}*/}
                  {/*onClick={() =>{this.setState({*/}
                    {/*privacyModal:true*/}
                  {/*})}}*/}
                {/*>{messages.register}</Button>*/}
              {/*</div>*/}
            </div>}

          </div>
        </div>

        <div style={{position:'fixed',bottom:'0px',left:'0px',width:'100%'}}> <TabBar
          unselectedTintColor="#949494"
          tintColor="#F09600"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title={messages.home}
            key="Life"
            icon={<div style={{
              width: '24px',
              height: '24px',
              background: 'url(image/home2.png) center center /  24px 24px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '24px',
              height: '24px',
              background: 'url(image/home3.png) center center /  24px 24px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === 'redTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'redTab',
              });
              goToPage({ dispatch, config: { url: "/shop_home" }, isReplace: false })
            }}
            data-seed="logId"
          >

          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/category.png) center center /  24px 24px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/category1.png) center center /  24px 24px no-repeat' }}
              />
            }
            title={messages.category}
            key="Koubei"

            selected={this.state.selectedTab === 'blueTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'blueTab',
              });
              goToPage({ dispatch, config: { url: "/category" }, isReplace: false })
            }}
            data-seed="logId1"
          >

          </TabBar.Item>
          {noLogin?  <TabBar.Item
            icon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/cart4.png) center center /  24px 24px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/cart5.png) center center /  24px 24px no-repeat' }}
              />
            }
            title={messages.cart}
            key="Friend"
            selected={this.state.selectedTab === 'greenTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'greenTab',
              });
              goToPage({ dispatch, config: { url: "/goodcart" }, isReplace: false })
            }}
          >

          </TabBar.Item>
            :
            <TabBar.Item
              icon={
                <div style={{
                  width: '24px',
                  height: '24px',
                  background: 'url(image/cart4.png) center center /  24px 24px no-repeat' }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '24px',
                  height: '24px',
                  background: 'url(image/cart5.png) center center /  24px 24px no-repeat' }}
                />
              }
              title={messages.cart}
              key="Friend"
              selected={this.state.selectedTab === 'greenTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'greenTab',
                });
                goToPage({ dispatch, config: { url: "/ungoodcart" }, isReplace: false })
              }}
            >

            </TabBar.Item>
          }

          <TabBar.Item
            icon={ <div style={{
              width: '24px',
              height: '24px',
              background: 'url(image/my.png) center center /  24px 24px no-repeat' }}
            />}
            selectedIcon={ <div style={{
              width: '24px',
              height: '24px',
              background: 'url(image/my1.png) center center /  24px 24px no-repeat' }}
            />}
            title={messages.my}
            key="my"
            selected={this.state.selectedTab === 'yellowTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'yellowTab',
              });
              goToPage({ dispatch, config: { url: "/my" }, isReplace: false })
            }}

          >

          </TabBar.Item>
        </TabBar></div>
        <Modal
          visible={this.state.privacyModal}
          style={{width:'98%'}}
          transparent
          maskClosable={true}
          title={messages.privacyTitle}
          footer={[{ text:messages.privacyDisagree, onPress: () => this.setState({privacyModal:false}) },
            { text: messages.privacyAgree, onPress: () => this.goRegister() },]}
        >
          <div style={{ height:500, overflow: 'scroll',color:'#606266',fontSize:'14px',textAlign:'left'}}>
            <div style={{marginBottom:'20px'}}>{messages.privacy1}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy2}</div>
            <div style={{color:'#303133',marginBottom:'20px'}}>{messages.privacy3}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy4}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy5}</div>
            <div style={{color:'#303133',marginBottom:'20px'}}>{messages.privacy6}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy7}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy8}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy9}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy10}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy11}</div>
            <div style={{color:'#303133',marginBottom:'20px'}}>{messages.privacy12}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy13}</div>
            <div style={{color:'#303133',marginBottom:'20px'}}>{messages.privacy14}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy15}</div>
            <div style={{color:'#303133',marginBottom:'20px'}}>{messages.privacy16}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy17}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy18}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy19}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy20}</div>
            <div style={{marginBottom:'20px',textAlign:'right'}}>{messages.privacy21}</div>
          </div>
        </Modal>
        <Modal
          visible={this.state.bindModal}
          transparent
          closable={true}
          maskClosable={true}
          onClose={this.onClose}

        >
          <div style={{}}>
            <div style={{
              width: '200px',
              height: '42px',
              background: '#FF9F00',
              borderRadius: '20px',
              margin:'48px auto 32px',
              color:'#fff',
              fontSize:'13px',
              fontWeight:"500",
              lineHeight:'42px'
            }} onClick={this.haveShop}>
              {messages.bindSureTitie}
            </div>
            <div style={{
              width: '200px',
              height: '42px',
              background: '#FF9F00',
              borderRadius: '20px',
              margin:'0 auto 48px',
              color:'#fff',
              fontSize:'13px',
              fontWeight:"500",
              lineHeight:'42px'
            }}
              onClick={this.customerType}
            >
              {messages.applyTitie1}
            </div>
          </div>
        </Modal>

      </div>
      </IntlProvider>
    )
  }
}
